<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0, user-scalable=no" name="viewport"/>
    <meta content="yes" name=" apple-mobile-web-app-capable"/>
    <meta content="no" name="apple-touch-fullscreen"/>
    <meta content="black" name=" apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="stylesheet" href="css/style.css" />
    <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
    <title>银行卡提现</title>
    <style>
        .layui-m-layercont{
            padding: 30px!important;
        }
        .layui-m-layerbtn span[yes]{
            color: #8bc34a!important;
        }
        .layui-m-layerbtn{
            height: 2rem!important;
            line-height:2rem!important;
            font-size: 0.6rem!important;
            background-color:#fff!important;
        }
        .layui-m-layer-msg .layui-m-layercont{
            padding: 10px 20px!important;
        }
        body .layui-m-layer .layui-m-layer-msg{
            bottom: initial!important;
        }
    </style>
</head>
<body class="whiteBg">
<div class="clearfix">
    <div class="daohanglan_box">
        <div class="title">
            <i class="icon iconfont icon-iconfontjiantou1"></i>
            <h4>银行卡提现</h4>
        </div>
    </div><!--头部-->

        <div class="clearfix">
            <div class="head_box3">
                <div class="headbox_ban fl">
                    <div class=" clearfix">
                        <img class="yinhangkakahao fl" src="images/yinghangkakahao.png" />
                        <span class="fl kahao">卡号&nbsp&nbsp&nbsp<span style="color:#515151;font-size:0.5rem">001936272</span></span>
                    </div>
                    <div class="jianj clearfix">
                        <img class="yinghangkaxingm fl" src="images/yinghangkaxingming.png" />
                        <span class="fl kahao">姓名&nbsp&nbsp&nbsp<span style="color:#515151;font-size:0.5rem">周某人</span></span>
                    </div>
                </div>
                <div class="zhongjian_xian fl"></div>
                <div class="headbox_ban2 fl">
                    <p class="integral">2606</p>
                    <p style="font-size:0.45rem;">可用蓝积分</p>
                </div>
                <a href="提现记录.html" class="tixianann">提现记录</a>
            </div>
        </div>
        <div class="tixian_box">
            <img class="tixian_img" src="images/ka.png" />
            &nbsp 提现记录
        </div>
    </div><!--个人信息-->
        <table border="1" class="danyuange">
            <tr>
                <td>
                    <p class="money"><span>50</span>元</p>
                    <p>500蓝积分</p>
                </td>
                <td>
                    <p class="money"><span>100</span>元</p>
                    <p>1000蓝积分</p>
                </td>
                <td>
                    <p class="money"><span>150</span>元</p>
                    <p>1500蓝积分</p>
                </td>
            </tr>

            <tr>
                <td>
                    <p class="money"><span>200</span>元</p>
                    <p>2000蓝积分</p>
                </td>
                <td>
                    <p class="money"><span>500</span>元</p>
                    <p>5000蓝积分</p>
                </td>
                <td>
                    <p class="money"><span>1000</span>元</p>
                    <p>10000蓝积分</p>
                </td>
            </tr>
        </table><!--积分提现-->

    <div class="diy">
        自定义金额
    </div>
    <div class="clearfix">
        <img class="diy_jiner fl" src="images/qian.png" />
        <input class="diy_jiner_zi fl" type="text" placeholder="请输入提现金额">
        <!--<div class="diy_jiner_zi fl">请输入提现金额</div>-->
    </div>
    <div class="xian"></div>
    <div class="ann">下一步</div>

    <div class="dibu_box4">
        <div class="left2">
            <div class="dibu_box4_zi">谨慎操作，提交后不可更改</div>
            <div class="dibu_box4_zi2">说明：</div>
            <div class="dibu_box4_zi3">
                本服务可将您账户中的 “蓝积分” 折算为人民币转入您办理的 “垃圾分类招行储蓄联名卡” 账户中，实现积分的提现，为了您能正常并成功提现，请您注意以下事项：
            </div>

            <div class="dibu_box4_zi3">
                1.本服务仅适用于已经办理 “垃圾分类招行储蓄联名卡” 的居民，未办理此卡居民无法进行提现操作。
            </div>

            <div class="dibu_box4_zi3">
                2.每月10号将对提现申请进行统一处理，10号后提交提现申请将在次月10号进行提现处理。
            </div>

            <div class="dibu_box4_zi3">
                3.提现申请提交后，您账户相应数量 “蓝积分” 将被冻结，无法在垃圾分类活动现场使用，未提现 “蓝积分” 数量可继续进行现场兑换。
            </div>

            <div class="dibu_box4_zi3">
                4.本提现服务仅可提现”蓝积分“，”绿积分“无法提现。
            </div>
        </div>
    </div>
<script src="js/layer.js" type="text/javascript"></script>
<script type="text/javascript" src="js/main.js"></script>
<script>
    var money = 0;
    var zhi = "";
    $(function(){
        $(".danyuange").on("click","td", function(){
            $(this).addClass("act").siblings().removeClass("act");
            $(this).parent().siblings().find("td").removeClass("act");
            if($(this).hasClass("act")){
                money = $(this).find(".money span").text();
                $(".diy_jiner_zi").val(money);
            }
            zhi = $(".diy_jiner_zi").val();
            zhiNuB();
        });
        //判断input是否有值
        $('.diy_jiner_zi').bind('input propertychange', function() {
            zhi = $(this).val();
            zhiNuB();
            $(".danyuange td p.money span").each(function(){
                var m =  $(this).text();
                if(zhi == m){
                    $(".danyuange td").removeClass("act");
                    $(this).parent().parent().addClass("act")
                }else{
                    $(this).parent().parent().removeClass("act");
                }
            });
            if(zhi == ""){
                $(".danyuange td").removeClass("act")
            }
        });
        //点击下一步
        $("body").on("click",".ann.green", function(){
            var integral = Math.floor($(".integral").text()/10);
            var price = $(".diy_jiner_zi").val();
            if (String(price).indexOf(".") > -1) {
                layer.open({
                    content: '请输入整数金额'
                    ,skin: 'msg'
                    ,time: 2 //2秒后自动关闭
                });
            }
            else if(price <= integral){
                layer.open({
                    shadeClose: false,
                    content: '\<\div id="nextBtn">' +
                    '<p>你的提现金额为 <span>50</span> 元整</p>' +
                    '<p>将扣除 <span>500</span> 蓝积分</p>' +
                    '<p>请谨慎核对，提交后不可更改！</p>'+
                    '\<\/div>'
                    ,btn: ['确认', '取消']
                    ,yes: function(index){
                        layer.close(index);
                        window.location.href = "提现状态.html";
                    }
                });
            }else {
                layer.open({
                    content: '积分不足，请重新输入'
                    ,skin: 'msg'
                    ,time: 2 //2秒后自动关闭
                });
            }
        })
    });
    function zhiNuB(){
        //判断input是否有值
        if(zhi!=""){
            $(".ann").addClass("green");
        }else{
            $(".ann").removeClass("green");
        }
    }
</script>
</body>
</html>